<template>
	<view class="page">
		<view class="nav_bar nav"
			:style="`background: url(${$util.prefix('auth/store_auth_nav_bg.png')}) 0 0 no-repeat;`">
			<uni-nav-bar color="#333" left-icon="left" title="" :border='false' :fixed="true" title="公会结算设置"
				background-color="transparent" @clickLeft="$native.backAction()">
			</uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="grid">
			<empty v-if="!list.length"></empty>
			<u-grid :border="false" :col="2">
				<u-grid-item v-for="(item,index) in list" :key="index" @click="toSet(item)">
					<view class="item flex_c">
						<view class="top flex_center">
							<!-- <view class="left flex_r_around">
								<text class="hidden">魅力榜No.1</text>
							</view>
							
							<view class="right flex_r_around">
								<text class="hidden">游戏开黑</text>
							</view> -->
						</view>
						
						<view class="bottom flex_c">
							<view class="name hidden"></view>
							<view class="name hidden">{{ item.guild_name }}</view>
							
							<!-- <view class="room flex_r_between">
								<view class="left flex_center">
									<image src="/static/public/alipay.png" mode="aspectFill" v-for="(val,i) in 3" :key="i"></image>
								</view>
								
								<view class="right">
									10个人在线
								</view>
							</view> -->
						</view>
					
						<view class="cover-image">
							<image :src="item.logo" mode="aspectFill"></image>
						</view>
					
					</view>
				</u-grid-item>
			</u-grid>
		</view>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty
		},
		data() {
			return {
				circle_id: 0,
				
				page: 1,
				total: 1,
				list: [],
			}
		},
		methods: {
			getList(){
				this.$get('/guild/getGuildListByCircle',{
					circle_id: this.circle_id,
				}).then(res=>{
					if(Array.isArray(res.data)){
						this.list.push(...res.data);
					}
				});
			},
			
			toSet(item){
				this.$util.toUrl(`/pages/guild/settlement/from?data=${JSON.stringify(item)}`);
			},
		},
		
		onLoad(option) {
			if (option.token) {
				uni.setStorageSync('token', option.token);
				uni.setStorageSync('cid', option.cid);
				uni.setStorageSync('terminal', option.terminal);
			}
			this.circle_id = option.circle_id;
			this.getList();
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 24rpx 16rpx;
		width: 100vw;
		min-height: 100vh;
		background: #FFFFFF;
	}
	
	.grid {
		.item {
			width: 352rpx;
			height: 352rpx;
			background: #D8D8D8;
			border-radius: 24rpx;
			margin-bottom: 14rpx;
			justify-content: space-between;
			overflow: hidden;
			position: relative;
			
			.top {
				padding: 24rpx;
				width: 100%;
				position: relative;
				z-index: 2;
				.left {
					width: 140rpx;
					height: 46rpx;
					background: linear-gradient( 90deg, #C42FE0 0%, #FD2A53 100%);
					border-radius: 20rpx;
					border: 2rpx solid #FCC2D8;
					margin-right: 12rpx;
					
					text {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
				
				.right {
					width: 120rpx;
					height: 46rpx;
					background: rgba(0,0,0,0.4);
					border-radius: 20rpx;
					backdrop-filter: blur(10px);
					
					text {
						font-size: 24rpx;
						color: #FFFFFF;
					}
				}
			}
			
			.bottom {
				width: 100%;
				height: 216rpx;
				background: linear-gradient( 180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%);
				padding: 90rpx 24rpx 24rpx;
				position: relative;
				z-index: 2;
				align-items: flex-start;
				justify-content: space-between;
				
				.name {
					font-weight: 500;
					font-size: 30rpx;
					color: #FFFFFF;
					line-height: 42rpx;
					// margin-bottom: 16rpx;
				}
				
				.room {
					.left {
						image {
							width: 44rpx;
							height: 44rpx;
							border-radius: 22rpx;
							margin-left: -8rpx;
						}
					}
					
					.right {
						font-size: 22rpx;
						color: #FFFFFF;
					}
				}
			}
		
			.cover-image {
				position: absolute;
				top: 0;
				left: 0;
				width: 352rpx;
				height: 352rpx;
				z-index: 1;
				
				image {
					width: 352rpx;
					height: 352rpx;
				}
			}
		
		}
	}
	
</style>